<!--
 * @Author: zi.yang
 * @Date: 2021-09-29 00:13:21
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-10-03 23:05:25
 * @Description: In User Settings Edit
 * @FilePath: \ziYangPM\src\views\AuthPages\Default\Forms\SignIn1Form.vue
-->
<template>
  <ValidationObserver ref="form" v-slot="{ handleSubmit }">
    <form class="mt-4" novalidate @submit.prevent="handleSubmit(handleLogin)">
      <ValidationProvider name="用户名" rules="required" v-slot="{ errors }">
        <div class="form-group">
          <label for="accountInput">用户账号</label>
          <input
            type="text"
            :class="'form-control mb-0' + (errors.length > 0 ? ' is-invalid' : '')"
            id="accountInput"
            v-model="user.username"
            placeholder="请输入账号！"
            required
          />
          <div class="invalid-feedback">
            <span>{{ errors[0] }}</span>
          </div>
        </div>
      </ValidationProvider>
      <ValidationProvider name="密码" rules="required" v-slot="{ errors }">
        <div class="form-group">
          <label for="passwordInput">用户密码</label>
          <router-link to="/auth/password-reset1" class="float-right">Forgot password?</router-link>
          <input
            type="password"
            :class="'form-control mb-0' + (errors.length > 0 ? ' is-invalid' : '')"
            id="passwordInput"
            v-model="user.password"
            placeholder="请输入密码！"
            required
          />
          <div class="invalid-feedback">
            <span>{{ errors[0] }}</span>
          </div>
        </div>
      </ValidationProvider>
      <div class="d-inline-block w-100">
        <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1">
          <input type="checkbox" class="custom-control-input" id="remember-me" />
          <label class="custom-control-label" for="remember-me">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary float-right">登 录</button>
      </div>
      <div class="sign-info">
        <span class="dark-color d-inline-block line-height-2">
          现在还没有账户?
          <router-link to="/auth/sign-up1" class="iq-waves-effect pr-4">注册账号</router-link>
        </span>
      </div>
    </form>
  </ValidationObserver>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import getClientInfo from '@/Utils/getClientInfo'

export default {
  name: 'SignIn1Form',
  data: () => ({
    user: {
      username: '',
      password: ''
    }
  }),
  computed: {
    ...mapGetters({
      stateUsers: 'User/userinfoState'
    })
  },
  methods: {
    ...mapActions('User', ['FetchLogin']),
    // 登录成功
    loginSuccess () {
      this.$message.success('登录成功！')
      this.$router.push({ name: 'dashboard.home-1' })
    },
    // 登录失败
    loginError (err) {
      if (err.msg === 'error') {
        this.$message.error('系统繁忙，请稍后再试！')
        return
      }
      this.$message.error(err.msg)
    },
    handleLogin () {
      const os = getClientInfo.getOS()
      const browser = getClientInfo.getBrowse()
      this.FetchLogin({ ...this.user, os, browser }).then(this.loginSuccess).catch(this.loginError)
    }
  }
}
</script>
